<template>
  <el-card class="box-card">
    <div class="authorize">
      <div class="authorize_header">
        <h4>添加/授权店铺</h4>
      </div>
      <div class="authorize_body">
        <div v-for="(item, index) in shopList" :key="index" class="item">
          <img alt="image" width="35" height="35" src="@/assets/image/pdd.png">
          <div class="media_body">
            <div class="">{{ item.platformName }}
            </div>
            <div class="text-small">{{ item.remark }}</div>
          </div>
          <div class="media_body_text">
            <el-button type="text">查看教程</el-button>
            <el-button type="text" style="color: #789;font-weight: bold" @click="handleGetUrl(item)">店铺添加/重新授权</el-button>
          </div>
        </div>
      </div>
    </div>
  </el-card>
</template>

<script>
import { getOauthUrl, platformList } from "@/api/product/productInfo";


export default {
  name: "product",
  components: {},
  data() {
    return {
      shopList: []
    };
  },

  created() {
    this.platformList()
  },
  methods: {
    handleGetUrl(data) {
      console.log('data', data);
      const params = {
        platformId: data.id,
        shopType: data.platformName
      }
      getOauthUrl(params).then(res => {
        console.log('res.data', res.data);
        window.open(res.data, '_blank')
      })
    },
    platformList() {
      platformList({}).then(res => {
        this.shopList = res.value
        console.log('res222', res);
      })
    }
  }
};
</script>

<style lang="scss" scope>
.authorize {
  box-sizing: border-box;
  height: 300px;
  overflow-y: auto;

  .authorize_header {
    width: 100%;
    padding: 10px 25px;

    h4 {
      font-size: 16px;
      color: #6c757d;
    }
  }

  .authorize_body {
    padding-top: 10px !important;
    padding-bottom: 20px;

    .item {
      border-bottom: 1px solid #f9f9f9;
      padding-bottom: 15px;
      margin-bottom: 10px;
      display: flex;
      -ms-flex-align: start;
      -webkit-box-align: start;
      align-items: flex-start;

      img {
        display: inline-block;
        margin-right: 10px;
      }

      .media_body {
        flex: 1;
      }
    }
  }
}
</style>